<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户登录</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" th:href="@{/api/oauth/static/layui/css/layui.css}" media="all">
</head>
<body>

<style>
    .login-container {
        width: 420px;
        margin: 120px auto 0;
        padding: 20px;
        border: 1px solid #d0e7e3;
        border-radius: 10px;
        box-shadow: 3px 3px 8px #dad9d9; /* 阴影偏移量、模糊半径、扩散半径和颜色 */
    }

    .login-other .layui-icon {
        position: relative;
        display: inline-block;
        margin: 0 2px;
        top: 2px;
        font-size: 26px;
    }

    .footer-container {
        margin-top: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .title-item {
        margin-top: 25px;
        margin-bottom: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>

<div class="layui-form">
    <div class="login-container">
        <div class="layui-form-item title-item">
            <h2>登&nbsp;&nbsp;&nbsp;&nbsp;录</h2>
            <!--            <h2>统一认证中心</h2>-->
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" value="" lay-verify="required" placeholder="用户名"
                       lay-reqtext="请输入用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required" placeholder="密   码"
                       lay-reqtext="请输入密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-vercode"></i>
                        </div>
                        <input type="text" name="captcha" lay-verify="required" placeholder="验证码"
                               lay-reqtext="请输入验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                        <input type="hidden" id="uid" name="uid"/>
<!--                        <img id="login-captcha" th:src="'/api/oauth/user/captcha?uid=' + ${T(java.util.UUID).randomUUID()}" lay-on="captcha" >-->
                        <img id="login-captcha" src="" lay-on="captcha" >
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
            <a href="#" lay-on="forget" style="float: right; margin-top: 7px;">忘记密码？</a>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid layui-bg-blue" lay-submit lay-filter="user-login-submit"
                    id="user-login-submit">登录
            </button>
        </div>
        <div class="layui-form-item login-other">
            <label>社交账号登录</label>
            <span style="padding: 0 21px 0 6px;">
                <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
                <a href="javascript:;"><i class="layui-icon layui-icon-github" style="color: #000000;"></i></a>
            </span>
            <a href="#" lay-on="register" style="float: right; margin-top: 7px;">注册帐号</a>
        </div>
    </div>

    <div class="layui-trans footer-container">
        <p>© 2024 <a href="#" target="_blank">www.llyong.cn</a></p>
    </div>
</div>

<!-- HTML Content -->
<script th:src="@{/api/oauth/static/layui/layui.js}"></script>
<script th:src="@{/api/oauth/static/layui/jquery.js}"></script>
<script th:src="@{/api/oauth/static/js/jquery-3.7.1.min.js}"></script>
<script th:src="@{/api/oauth/static/js/jquery.cookie.js}"></script>
<script>
    layui.use(function () {
        let layer = layui.layer;
        let $ = layui.jquery;
        let form = layui.form;
        let util = layui.util;

        let protocol = window.location.protocol;
        let hostname = window.location.hostname;
        let port = window.location.port;
        let path = window.location.pathname;
        let search = window.location.search

        let url = `${protocol}//${hostname}:${port}${path}${search}`;
        let ctx;
        if (path.startsWith('/api')) {
            ctx = '/api';
        } else {
            ctx = '';
        }

        let return_to;
        if (path.endsWith('/oauth/login/form')) {
            return_to = ctx + '/oauth/client/index'
        }

        function getUid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                let r = Math.random() * 16 | 0,
                    v = c === 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        }

        let uid = getUid();
        layui.$('#uid').val(uid);
        document.getElementById('login-captcha').src = ctx + `/oauth/user/captcha?uid=${uid}`;

        //提交
        form.on('submit(user-login-submit)', function (obj) {
            let field = obj.field;
            if (field.remember === 'on') {
                field.remember = true;
            } else {
                field.remember = false;
            }
            let loadIndex = layer.load(0);
            $.ajax({
                url: ctx + "/oauth/user/login",
                type: 'POST',
                data: field,
                contentType: 'application/x-www-form-urlencoded;charset=utf-8',
                dataType: 'json',
                success: function (res) {
                    layer.close(loadIndex);
                    //执行成功
                    if (res.code === '00000') {
                        //登入成功的提示与跳转
                        layer.msg('登入成功', {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        }, function () {
                            sessionStorage.setItem('Access_Token', res.data.access_token);
                            // $.cookie('Access_Token', res.data.access_token);
                            // 重新载入
                            if (return_to) {
                                location.href = return_to;
                            } else {
                                location.reload(true);
                            }
                        });
                    } else {
                        layer.msg(res.msg, {icon: 2, time: 3000, shade: [0.3, '#000', true]});
                    }
                }
            })
            // 阻止表单默认提交
            return false;
        });

        // 事件
        util.on('lay-on', {
            'register': function (obj) {
                location.href = `${protocol}//${hostname}:${port}` + ctx + '/oauth/register/form?return_to=' + encodeURIComponent(url)
            },
            'forget': function (obj) {
                location.href = `${protocol}//${hostname}:${port}` + ctx + '/oauth/forget/form?return_to=' + encodeURIComponent(url)
            },
            'captcha': function (obj) {
                let uid = getUid();
                layui.$('#uid').val(uid);
                document.getElementById('login-captcha').src = ctx + `/oauth/user/captcha?uid=${uid}`;
            }
        });

        // 回车键绑定
        layui.$(document).keydown(function (e) {
            if (e.keyCode === 13) {
                layui.$('#user-login-submit').click();
            }
        });
    });
</script>
</body>
</html>